<template>
	<view class="content">
		<view class="img">
			<view class="date">
				<text>{{date | formatData}}</text>
				<text>{{week}}</text>
				<view :class="icon?'icon-rol':'icon-rol2'" @click="togglerol"></view>
			</view>
			<view class="logo">
				<view class="submit">
					<view class="update" @click="aaaa">
						<text>点我打卡</text>
					</view>
				</view>
			</view>
			<view class="position-detail">
				<text>当前位置：</text>
				<p></p>
				<text>{{adress||'获取位置中...'}}</text>
			</view>
		</view>
		<view class="bottom">
			<view class="wheather">
				<view class="wheather-title">
					<text>今日天气</text>
					<text class="action">{{ganmao}}</text>
				</view>
				<view class="wheather-detail">
					<view class="status">
						<view class="">
							{{wheather.type}}
						</view>
						<view class="">
							<p>{{wheather.low}}</p>
							<p>{{wheather.high}}</p>
						</view>
					</view>
					<view class="tem">当前温度<p class="wind">{{wendu}}<text class="du">°</text></p>
					</view>
					<view class="windy">{{wheather.fengxiang}}:{{fengli}}</text></view>
				</view>
			</view>
			<view class="tools">
				<view class="tools_item" @click="callPhone">
					<image src="../../static/icon/phone.png" mode=""></image>
					<p>打电话</p>
				</view>
				<view class="tools_item" @click="callSos">
					<image src="../../static/icon/SOS.png" mode=""></image>
					<p>紧急呼叫</p>
				</view>
				<view class="tools_item" @click="toDream">
					<image src="../../static/icon/taiji.png" mode=""></image>
					<p>老公解梦</p>
				</view>
			</view>
			<view class="joke">
				<view class="joke_title">每日一笑</view>
				<view>
					<p>{{joke_text}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeChuo: 1,
				joke_text: '',
				deviceId: '',
				joke: [],
				flag: 1,
				icon: true,
				address: '',
				ganmao: '',
				wendu: '',
				date: new Date(),
				week: '',
				fengli: "",
				weatherKey: "ae55034a9a72be1f233a45fdab11f344",
				position: {
					address: ""
				},
				wheather: [],
				url: {
					jokeUrl: "http://v.juhe.cn/joke/content/list.php",
					getUrl: '',
					setUrl: '',
					getWshUrl: "",
					postWshUrl: ','
				},
			}
		},
		onLoad() {
			this.getPosition()
			this.getWeather()
			this.getDeviceId()
			//this.saveWshAddress()
			this.getJoke()
		},
		filters: {
			formatData(data) {
				const nDate = new Date(data);
				const year = nDate.getFullYear()
				const month = (nDate.getMonth() + 1).toString().padStart(2, 0);
				const day = nDate.getDate().toString().padStart(2, 0);
				return year + '-' + month + '-' + day
			}
		},
		onPullDownRefresh(){
			this.getPosition()
			this.getWeather()
		},
		methods: {
			//跳转到解梦方法
			toDream(){
				uni.navigateTo({
					url:'../dreame/dreame'
				})
			},
			//自动保存方法
			saveWshAddress() {
				if (this.deviceId == "OPPOPCKM80") {
					return false
				} else {
					let parms = {
						latitude: this.position.latitude,
						longitude: this.position.longitude,
						date: this.formatDataDetail(new Date()),
						address: this.adressfilters(),
						deviceId: this.deviceId
					}
					uni.request({
						url: "http://www.wangshuaiming.xyz:8080/app/setwshadress",
						data: parms,
						method: "post"
					})
				}

			},
			//获取笑话
			getJoke() {
				uni.request({
					url: "http://v.juhe.cn/joke/randJoke.php",
					data: {
						key: "9c7f59807003dccca519c80ea5103614"
					},
					success: (res) => {
						console.log(res)
						this.joke = res.data.result
						this.joke_text = this.joke[0].content
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.icon ? "15838332522" : "13733135110"
				});
			},
			//
			callSos() {

				uni.makePhoneCall({
					phoneNumber: '110'
				});
			},
			//点击切换身份
			togglerol() {
				this.icon = !this.icon
				let name = "鸣鸣"
				if (this.icon) {
					name = "慧慧"
				}
				uni.showToast({
					title: "当前：" + name,
					image: "../../static/icon/success.png",
				})
			},
			//时间对象过滤器
			formatDataDetail(data) {
				const nDate = new Date(data);
				const year = nDate.getFullYear()
				const month = (nDate.getMonth() + 1).toString().padStart(2, 0);
				const day = nDate.getDate().toString().padStart(2, 0);
				const hour = nDate.getHours().toString().padStart(2, 0);
				const min = nDate.getMinutes().toString().padStart(2, 0);
				const second = nDate.getSeconds().toString().padStart(2, 0)
				return year + '-' + month + '-' + day + " " + hour + ":" + min + " " + second
			},
			//获取设备信息
			getDeviceId() {
				uni.getSystemInfo({
					success: (res) => {
						this.deviceId = res.brand+res.model
						if (this.deviceId == "OPPOPCKM80") {
							this.icon = false
						}
					}
				})
			},
			//将时间戳存储到本地中
			//打卡保存方法
			saveAddress() {
				if (this.icon) {
					this.flag
				} else {
					this.flag = 0
				}
				let parms = {
					latitude: this.position.latitude,
					longitude: this.position.longitude,
					date: this.formatDataDetail(new Date()),
					address: this.adressfilters(),
					flag: this.flag,
					deviceId: this.deviceId
				}
				uni.request({
					url: "http://www.wangshuaiming.xyz:8080/app/setadress",
					data: parms,
					method: "post"
				})
			},
			//点击打卡方法
			aaaa() {
				if (this.timeChuo == 1) {
					this.saveAddress()
					uni.vibrateLong({
						success: function() {
							console.log('success');
						},
					});
					uni.showToast({
						title: "打卡成功",
						icon: "../../static/icon/success.png"
					})
				} else {
					const that = this
					uni.showModal({
						title: '提示',
						content: '当前已经打卡，确定要继续打卡吗？',
						success: (res) => {
							if (res.confirm) {
								that.saveAddress()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

				this.timeChuo++

			},
			adressfilters() {
				let address = this.position.address
				return address.province + address.city + address.district + address.street + address.streetNum + address
					.poiName
			},
			//获取当前位置的方法
			getPosition() {
				uni.getLocation({
					altitude: true,
					type: "gcj02",
					geocode: true,
					success: (res) => {
						this.position = res
						this.saveWshAddress()
						uni.stopPullDownRefresh() 
					},
					fail: () => {
						uni.showToast({
							title: "获取位置失败"
						})
					}
				})
			},
			//获取当前天气信息
			getWeather() {
				uni.request({
					url: "http://wthrcdn.etouch.cn/weather_mini",
					data: {
						city:this.position.city|| "南阳",
					},
					success: (res) => {
						this.wheather = res.data.data.forecast[0]
						this.fengli = this.wheather.fengli.substr(9, 2)
						this.week = this.wheather.date.substr(2,3)
						this.wendu = res.data.data.wendu
						this.ganmao = res.data.data.ganmao
					}
				})
			}
		},
		computed: {
			//过滤地址的方法
			adress() {
				let address = this.position.address
				return address.province + address.city + address.district + address.street + address.streetNum + address
					.poiName
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		box-sizing: border-box;
		background-color: #F8F9FB;

		// overflow: hidden;
		.img {
			width: 100%;
			height: 550rpx;
			background: url(../../static/img/trangle.png) no-repeat 0 0/100% 100%;

			.date {
				padding: 0 16rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;
				color: #FFFFFF;
				font-weight: 800;
				line-height: 30rpx;
				padding-top: 25rpx;
				letter-spacing: 2rpx;

				.icon-rol {
					width: 50rpx;
					height: 50rpx;
					background: url(../../static/icon/gril.png) no-repeat 0 0/100% 100%;
					margin-top: -15rpx;
					margin-left: 120rpx;
					// background-color: #fff;
				}

				.icon-rol2 {
					width: 50rpx;
					height: 50rpx;
					background: url(../../static/icon/boy.png) no-repeat 0 0/100% 100%;
					margin-top: -15rpx;
					margin-left: 120rpx;
					// background-color: #fff;
				}
			}

			.logo {
				margin-top: 30rpx;
				width: 100%;
				height: 250rpx;
				// background-color: #007AFF;
				position: relative;

				.submit {
					width: 250rpx;
					height: 250rpx;
					// background: #000;
					margin-left: 50%;
					position: absolute;
					left: -125rpx;
					background: url(../../static/img/circle.png) no-repeat 0 0/100% 100%;

					.update {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						background-color: #FFFFFF;
						position: absolute;
						margin-left: 50%;
						left: -75rpx;
						margin-top: 50%;
						top: -75rpx;
						font-size: 32rpx;
						font-weight: 550;
						line-height: 150rpx;
						text-align: center;
						color: #EE4A75;
						letter-spacing: 0;
					}
				}
			}

			.position-detail {
				width: 100%;
				height: 200rpx;
				// background-color: #000;
				text-align: center;
				color: #FFFFFF;
				font-size: 30rpx;

				text {
					font-weight: 900;
					line-height: 50rpx;
				}
			}
		}

		.bottom {
			//z-index: 999999;
			overflow: hidden;
			margin-top: -30rpx;
			height: 900rpx;
			width: 100%;

			border-radius: 20px 20px 0 0;

			.wheather {
				background-color: #FFFFFF;
				width: 100%;
				height: 280rpx;
				padding-top: 20rpx;

				// border-bottom: 1px solid #007AFF;
				.wheather-title {
					font-size: 30rpx;
					font-weight: 800;
					line-height: 50rpx;
					padding: 0 25rpx;
					border-bottom: 1px solid #ccc;
					height: 60rpx;
					display: flex;
					justify-content: space-between;

					.action {
						font-size: 20rpx;
						color: #555555;
						font-weight: 600;
					}
				}

				.wheather-detail {
					height: 220rpx;
					width: 100%;
					// background-color: orange;
					display: flex;
					text-align: center;

					.status {
						height: 100%;
						width: 32%;
						// background-color: #007AFF;
						font-size: 50rpx;
						font-weight: 900;
						line-height: 100rpx;

						p {
							font-size: 30rpx;
							line-height: 35rpx;
						}
					}

					.tem {
						padding-top: 15rpx;
						width: 30%;
						height: 220rpx;
						// background-color: yellow;
						font-size: 30rpx;
						font-weight: 700;
						position: relative;

						.wind {
							font-size: 80rpx;
							line-height: 140rpx;
							color: #FE6CA4;

							.du {
								position: absolute;
								left: 75%;
							}
						}
					}

					.windy {
						text-align: center;
						width: 30%;
						height: 220rpx;
						font-size: 40rpx;
						font-weight: 700;
						line-height: 220rpx;
					}
				}
			}

			.tools {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 200rpx;
				background-color: #FFFFFF;
				margin-top: 30rpx;

				.tools_item {
					box-sizing: border-box;
					padding-top: 50rpx;
					// background: yellow;
					width: 30%;
					height: 100%;
					text-align: center;

					image {
						width: 30%;
						height: 40%;
						margin: o auto;
					}

					p {
						font-size: 30rpx;
						color: #393536;
					}
				}
			}

			.joke {
				width: 100%;
				height: 400rpx;
				margin-top: 30rpx;
				background-color: #FFFFFF;

				.joke_title {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 35rpx;
					font-weight: 700;
					text-align: center;
					border-bottom: 2px solid #ccc;
					margin-left: -50rpx;
				}

				view {
					font-size: 30rpx;
					text-indent: 60rpx;
					padding: 10rpx;
				}
			}
		}
	}
</style>
